<template>
  <div>
    <v-toolbar type="alert">
      <div slot="tip" class="panel panel-default panel-search">
        <el-form :inline="true">
          <!--<el-form-item style="margin-left: 20px " label="大类标识">-->
          <!--<span style="color:red"> {{ parent?parent.code:'请点上方大类' }}</span>-->
          <!--</el-form-item>-->

          <!--<el-form-item label="小类编码" prop="code">-->
          <!--<el-input v-model="page.query.param.code" clearable></el-input>-->
          <!--</el-form-item>-->
          <!--<el-form-item label="小类名称" prop="name">-->
          <!--<el-input v-model="page.query.param.name" clearable></el-input>-->
          <!--</el-form-item>-->
          <el-form-item label="班次" prop="name">
            <el-input disabled v-model="parent.name"></el-input>
          </el-form-item>
          <el-button type="primary" @click="search" v-keycode="'ENTER'"
            >查询</el-button
          >
          <!--<el-button @click="cancel">取消</el-button>-->
          <el-button v-show="parentId > 0" type="primary" plain @click="create"
            >新增</el-button
          >
        </el-form>
      </div>
      <!--<el-button plain @click="exportRecords">导出 XLS</el-button>-->
      <!--<el-button type="primary" plain @click="create" style="align:left">新增</el-button>-->
    </v-toolbar>

    <v-table
      ref="table"
      :dblclick="edit"
      :page="page"
      :table-minheight="450"
      @dataloaded="onDataloaded"
    >
      <el-table-column prop="segment" :sortable="true" label="段落" width="70">
        <template slot-scope="{ row }">
          <!--<span style='color:black'>  {{row.segment}}</span>-->
          <el-button type="text" @click="edit(row)" plain>{{
            row.segment
          }}</el-button>
        </template>
      </el-table-column>
     <el-table-column prop="subclassType" label="子类型" width="111">
          <template slot-scope="{ row }">
            {{ DICT.SUBCLASSTYPE[row.subclassType] }}
          </template>
        </el-table-column>
      <el-table-column
        prop="sStart"
        :sortable="true"
        label="上班卡"
        width="120"
      >
        <template slot-scope="{ row }"
          ><span style="color: black"> {{ row.sStart }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="sStartNo" label="上班免卡" width="99">
        <template slot-scope="{ row }">
          <span :style="row.sStartNo ? 'color:red' : 'color:black'">
            {{ row.sStartNo ? "是" : "否" }}
          </span>
        </template>
      </el-table-column>

      <el-table-column prop="sEnd" :sortable="true" label="下班卡" width="90">
        <template slot-scope="{ row }"
          ><span style="color: black"> {{ row.sEnd }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="sEndNo" label="下班免卡" width="100">
        <template slot-scope="{ row }">
          <span :style="row.sEndNo ? 'color:red' : 'color:black'">
            {{ row.sEndNo ? "是" : "否" }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="overDay" label="跨天" width="90">
        <template slot-scope="{ row }">
          <span :style="row.overDay ? 'color:red' : 'color:black'">
            {{ row.overDay ? "是" : "否" }}
          </span>
        </template>
      </el-table-column>

      <el-table-column prop="sStartB" label="上班卡有效分钟" width="140">
        <template slot-scope="{ row }">
          <span style="color: black">
            {{ row.sStartB + "--》" + row.sStartA }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="sEndB" label="下班卡有效分钟" width="140">
        <template slot-scope="{ row }">
          <span style="color: black">
            {{ row.sEndB + "--》" + row.sEndA }}
          </span>
        </template>
      </el-table-column>

      <el-table-column prop="hStandard" label="标准工时" width="100">
        <template slot-scope="{ row }"
          ><span style="color: black"> {{ row.hStandard }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="hMinus" label="扣除工时" width="90">
        <template slot-scope="{ row }"
          ><span style="color: black"> {{ row.hMinus }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="includeOvertime" label="包含加班" width="90">
        <template slot-scope="{ row }">
          <span :style="row.includeOvertime ? 'color:red' : 'color:black'">
            {{ row.includeOvertime ? "是" : "否" }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="hOvertime" label="加班工时" width="90">
        <template slot-scope="{ row }"
          ><span style="color: black"> {{ row.hOvertime }}</span>
        </template>
      </el-table-column>
      <!--<el-table-column prop='updatedAt' :sortable='true' label='修改时间' width='110'>-->
      <!--<template slot-scope='{row}'><span style='color:black'>-->
      <!--{{row.updatedAt}}</span>-->
      <!--</template>-->
      <!--</el-table-column>-->

      <el-table-column width="80" label="操作">
        <template slot-scope="scope">
          <el-button type="text" title="编辑" @click="edit(scope.row)">
            <i class="el-icon-edit"></i>
          </el-button>
          <el-button
            type="text"
            @click="del(scope.row, scope.$index)"
            title="删除"
          >
            <span style="color: red"> <i class="el-icon-delete red"></i></span>
          </el-button>
        </template>
      </el-table-column>
    </v-table>

    <v-dialog ref="formDiag" :width="'45%'" title="信息编辑">
      <form-panel @saved="onFormSaved" :parentId="parentId"></form-panel>
      <div slot="footer">
        <el-button type="primary" @click="$refs.formDiag.dispatch('submit')"
          >保存</el-button
        >
        <el-button
          type="default"
          @click="
            () => {
              $refs.formDiag.hide();
            }
          "
          >取消</el-button
        >
      </div>
    </v-dialog>
  </div>
</template>
<style rel="stylesheet/less" scoped lang="less">
.status_green {
  color: green;
}
</style>

<script>
import FormPanel from "./FormSub";

export default {
  components: { FormPanel },

  data() {
    return {
      DICT: {
        SUBCLASSTYPE: {
          10: "10--正常班",
          20: "20--自动算",
          21: "21--平时加班",
          22: "22--周末加班",
          23: "23--节假日加班",
          30: "30--出差",
          31: "31--请假",
          32: "32--调休",
          33: "33--年假",
          34: "34--事假",
          35: "35--病假",
        },
      },
      metafields: [],
      parentId: -1,
      parent: { name: "" },
      formStatus: 1,
      orderDateRange: [],
      summaryMap: {},
      page: {
        query: {
          orderBys: "code|asc",
          //orderBys: 'segment|asc',
          param: {
            parentId: -1,
            isDeleted: false,
          },
        },
        getData: this.$api.attend.attend.ClassItemService.query,
      },
      tableActions: [
        {
          name: "编辑",
          handle: this.edit,
        },
        {
          name: "删除",
          handle: this.del,
          style: "color:red",
        },
      ],
    };
  },
  computed: {},

  methods: {
    onDataloaded(rsp) {
      // if (rsp.total < 1) return;
      // let promotionIds = rsp.data.map(r => r.id);
      // this.$api.ipark.PromotionInfoService.summaryGroupByPromotionId(promotionIds).then(rs => {
      //     let _rs = rs || [];
      //     this.summaryMap = {}
      //     _rs.forEach(r => {
      //         this.summaryMap[r.promotionId] = r;
      //     })
      // })
    },
    /*
            导出
             */
    exportRecords() {
      let params = this.getSearchParams();
      console.log(params);
      // this.$api.dongxw.CustomerService.export(params);
    },
    getSearchParams() {
      this.page.query.dateRanges = {};
      if (
        this.dateRangeType != null &&
        this.dateRange &&
        this.dateRange.length > 0
      ) {
        this.page.query.dateRanges[this.dateRangeType] = {
          startDate: this.dateRange[0],
          endDate: this.dateRange.length > 1 ? this.dateRange[1] : null,
        };
      }
      return this.page.query;
    },
    create() {
      // this.$message({
      //     type: "success",
      //     message: this.parentId
      // });
      this.$refs.formDiag.parentId = this.parentId;
      this.$refs.formDiag.show();
    },
    edit(row) {
      this.$refs.formDiag.show({ classItemId: row.classItemId });
    },
    toggleStatus(row) {
      let status = row.status;
      let msg =
        '确定下架此活动吗？</br><span style="color:red">一旦下架，已派发的优惠券无法使用!</span>';

      this.$confirm(msg, "确认", {
        type: "warning",
        dangerouslyUseHTMLString: true,
      }).then(() => {
        this.$api.ipark.PromotionInfoService.updateStatus(
          row.id,
          status == 1 ? 2 : 1
        ).then((rsp) => {
          this.search();
          this.$message({
            type: "success",
            message: "操作成功!",
          });
        });
      });
    },
    del(row) {
      this.$confirm("确定删除此条记录吗?", "提示", {
        type: "warning",
      }).then(() => {
        this.$api.attend.attend.ClassItemService.deleteById(row.classItemId).then(
          (rsp) => {
            this.search();
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          }
        );
      });
    },
    onFormSaved() {
      this.$refs.formDiag.hide();
      this.$nextTick(this.search);
    },
    init(options = {}) {
      this.parentId = options.parentId;
      this.parent = options.parent || { name: "" };
      this.page.query.param.classMasterId = this.parentId;
      console.log(this.parentId);
      this.search();
    },
    search() {
      this.$refs.table.load();
    },
    cancel() {
      this.dateRange = [];
      this.page.query.param = {};
      this.page.query.param.parentId = this.parentId;
      this.search();
    },
    // loadDict(){
    //     console.log('load');
    //     this.$api.metadata.MetaData.queryFieldsByTable('dict_area').then(rsp => {
    //         this.metafields = rsp;
    //     });
    // },
  },

  created() {},
  mounted() {
    this.$on("init", this.init);
  },
};
</script>
